<html><head>
	<title> Collada Model using Three.js</title>
	<script src="lib/three.js"></script>
	<script src="lib/Detector.js"></script>
	<script src="lib/THREEx.KeyboardState.js"></script>
	<script src="lib/Stats.js"></script>
	<script src="lib/ColladaLoader.js"></script>
</head>
<body>
<script>
	// Check if WebGL is supported?
	if(!Detector.webgl) Detector.addGetWebGLMessage();  
	
	// --- Globals ---
	var xAxis = new THREE.Vector3( 1, 0, 0 );
	var yAxis = new THREE.Vector3( 0, 1, 0 );
	var zAxis = new THREE.Vector3( 0, 0, 1 );
	var renderer, container, scene, camera;
	var screen_width, screen_height, view_angle, aspect, near, far, controls;
	var player, skin;
	var keyboard = new THREEx.KeyboardState();
	var loader;
	// 0 - 40 Walk
	// 41 - 104 Idle
	var startFrame = 41, endFrame = 104, totalFrames = endFrame - startFrame, lastFrame;
	var clock = new THREE.Clock();
	var t = 0;
	var collidableMeshList = [];
	var test = true;
	init();
	animate();
	
	// --- FUNCTIONS ---
	function init()
	{
		// SCENE
		scene = new THREE.Scene();
		
		// CAMERA
		screen_width = window.innerWidth;
		screen_height = window.innerHeight;
		view_angle = 60;
		aspect = screen_width / screen_height;	
		near = 0.1, far = 200000;
		camera = new THREE.PerspectiveCamera( view_angle, aspect, near, far);
		scene.add(camera);
		
		// RENDERER
		renderer = new THREE.WebGLRenderer( {antialias:true} );
		renderer.setSize( screen_width, screen_height);
		container = document.createElement('div');
		document.body.appendChild( container );
		container.appendChild(renderer.domElement);
		
		// FLOOR
		var floorTexture = new THREE.ImageUtils.loadTexture( 'art/textures/bg.jpg' );
		floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
		floorTexture.repeat.set( 1, 1 );
		var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture } );
		var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
		var floor = new THREE.Mesh(floorGeometry, floorMaterial);
		floor.doubleSided = true;
		scene.add(floor);

		// AXIS HELPER
		var axes = new THREE.AxisHelper();
		axes.scale.set(1, 1, 1);
		scene.add(axes);

		// LIGHTS
		var light = new THREE.AmbientLight(0xffffff);
		light.position.set(0, 100, 0);
		scene.add(light);
		
		// SKYBOX
		var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x38B0DE } );
		var skyBoxGeometry = new THREE.CubeGeometry( 1000, 1000, 1000);
		skyBoxMaterial.side = THREE.BackSide;
		var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
		scene.add(skyBox);
		controls = new THREE.TrackballControls( camera );
		
		// PLAYER
		loader = new THREE.ColladaLoader();
		loader.load('models/girl.dae',function colladaReady( collada ){
			player = collada.scene;
			skin = collada.skins [ 0 ];
			scene.add( player );
		});

	}
	function animate()
	{
		requestAnimationFrame( animate );
		update();
		render();
	}
	
	function render()
	{
		renderer.render(scene, camera);
	}
	
	function update()
	{
		//controls.update();
		var delta = clock.getDelta();
		var moveDistance = 50 * delta;

		// move forward / backward
		if ( keyboard.pressed("W") || keyboard.pressed("up") )
		{
			startFrame = 0, endFrame = 40, totalFrames = endFrame - startFrame
			player.translateY( -moveDistance );
		}

		else if ( keyboard.pressed("S") || keyboard.pressed("down") )
		{
			startFrame = 0, endFrame = 40, totalFrames = endFrame - startFrame
			player.translateY( moveDistance );
		}
		else
		{
			startFrame = 41, endFrame = 104, totalFrames = endFrame - startFrame
		}	

		// rotate left/right
		if ( keyboard.pressed("A") || keyboard.pressed("left") )
		{
			rotateAroundWorldAxis(player, zAxis, 1);
		}
		if ( keyboard.pressed("D") || keyboard.pressed("right") )
		{
			rotateAroundWorldAxis(player, zAxis, -1);
		}

		delta = delta / 2;
		if ( t > 1 ) t = 0;
		if ( skin )
		{
			skin.morphTargetInfluences[lastFrame] = 0;
			var currentFrame = startFrame + Math.floor(t*totalFrames);
			skin.morphTargetInfluences[currentFrame] = 1;
			t += delta;
			lastFrame = currentFrame;
		}

		if( player )
		{			
			camera.position.x = player.position.x;
			camera.position.y = player.position.y - 150;
			camera.position.z = player.position.z + 100 ;
			camera.lookAt( player.position );
		}
		
	}

	function rotateAroundWorldAxis( object, axis, degrees ) 
	{
	radians = degrees * Math.PI / 180;
    var rotationMatrix = new THREE.Matrix4();
    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    rotationMatrix.multiplySelf( object.matrix );
    object.matrix = rotationMatrix;
    object.rotation.setEulerFromRotationMatrix( object.matrix );
	}
	
</script><div><canvas width="1366" height="642"></canvas></div>

</body></html>